<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.panel{
				border: 4px solid #ddd;
				width: 192px;
				margin: 100px auto;
				border-radius: 6px;
			}
			.panel p, .panel input{
				font-family: '微软雅黑';
				font-size: 20px;
				margin: 4px;
				float: left;
			}
			.panel p{
				width: 122px;
				height: 26px;
				border: 1px solid #ddd;
				padding: 6px;
				overflow: hidden;
			}
			
			.panel input{
				width: 40px;
				height: 40px;
				border: 1px solid #ddd;
			}
		</style>
		<script src="../js/jquery-3.7.0.min.js"> </script>
		<script>
			$(function() {
				// 点击按钮
				var clickBtn = "";
				// count判断是否是第一次点击
				var count = 0;
				$(":button").click(function() {
					// 选择了清零按钮
					if ($(this).val() == 'C') {
						count = 0;
						return $("#screen").text("");
					}
					// 选择了相等按钮
					if ($(this).val() == '=') {
						try {
							var inputText = $("#screen").text();
							clickBtn = eval(inputText);
							return $("#screen").text(eval(inputText));
						} catch (err) {
							count = 0;
							return $("#screen").text("您的操作有误哦！");
						}
					}
					if (count == 0) {
						$("#screen").text("");
						clickBtn = $(this).val();
					} else {
						clickBtn += $(this).val();
					}
					count++;
					return $("#screen").text(clickBtn);
				});
		 
			});
		</script>
		
	</head>
	<body>
		<div class='panel' >
			<div>
				<p id="screen"></p>
				<input type="button" value="C"/>
				<div style="clear: both;"></div>
			</div>
			<div>
				<input type="button" value="7"/>
				<input type="button" value="8"/>
				<input type="button" value="9"/>
				<input type="button" value="/"/>
				
				<input type="button" value="4"/>
				<input type="button" value="5"/>
				<input type="button" value="6"/>
				<input type="button" value="*"/>
				
				<input type="button" value="1"/>
				<input type="button" value="2"/>
				<input type="button" value="3"/>
				<input type="button" value="-"/>
				
				<input type="button" value="0"/>
				<input type="button" value="."/>
				<input type="button" value="="/>
				<input type="button" value="+"/>
				
				<div style="clear: both;"></div>
			</div>
		</div>
	</body>
</html>